<template>
  <div class="boxs-bov">
    <div class=" top_some">
        <el-input
        v-model.trim="formInline.username"
                placeholder="管理员名称"
                style="width: 100%"
                clearable
                @clear="search"
              ></el-input>
      <el-button type="primary"   @click="search"  >搜索</el-button>
    </div> 

    <div >
      <el-card class="box-card" v-for="(item,index ) in tableData" :key="index">
        <div>
          <div class="text_item">
            <span class="text_1">姓 名：</span>
            <span>{{item.username}}</span>
          </div>
          <div class="text_item">
            <span class="text_1">手机号：</span>
            <span>{{item.mobile}}</span> 
          </div>
        </div>

        <div class="clearfix"> 
          <el-link type="info">{{formatDateTime(item.updatetime)}}</el-link>

          <div> 
          <el-link type="primary" style="margin-right: 10px" @click="handleEdit(item, 'edit')">编辑</el-link>
          <el-link type="danger" @click="handleEdit(item,'delete')">删除</el-link>

          </div>
          
        </div>
      </el-card>
      
    </div>
    <!-- 底部添加按钮样式 -->
    <BottomAdd  >
        <el-button @click="addModule" :icon="`Plus`" type="primary" style="width: 100%;height: 40px;"
            >添加</el-button
          >
    </BottomAdd>
    <div style="height: 22vh"></div>
    <AddModuleGoodsType  ref="addModuleFlag"
      @refreshData="refreshData" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import { dateFormats } from "@/utils/util";
import { zregionuserList, zregionuserDel, adminGroup } from "@/api/api";
import XEUtils from "xe-utils";
import { setStorage, getStorage } from "@/utils/util";

import AddModuleGoodsType from "@/components/h5/onAdd.vue";
import { lyMixins } from "@/mixins/mixins";
import dayjs from "dayjs";
import BottomAdd from "@/components/bottom_add.vue";
export default {
    components: {
    AddModuleGoodsType,
    Pagination,
    BottomAdd
  },
  data() {
    return {
      isFull: false,
      loadingPage: false,
      // 选项框选中数组
      ids: [],

      // 选项框非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      formInline: {
        page: 1,
        page: 1,
        per_page: 9999,
      },
      pageparm: {
        page: 1,
        per_page: 9999,
        total: 0,
      },
      statusList: [
        { id: 1, name: "正常" },
        { id: 0, name: "禁用" },
      ],
      timers: [],
      tableData: [],
      selectData: [],
      GroupList: [], //管理员分组列表
    };
  },
  methods: {
    authority(groupArr = [0]) {
      // 权限筛选
      let userInfo = this.userInfo;
      // 当前权限和传来的权限组进行对比
      if (groupArr.some((item) => Number(item) === userInfo)) return true;
      return false;
    },
    formatDateTime(time) {
      return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
    },
    refreshData(x) {
      // 新增成功 搜索归0
      if (x) this.handleEdit("", "reset");
      else this.getData();
    },
    setFull() {
      this.isFull = !this.isFull;
      window.dispatchEvent(new Event("resize"));
    },
    // 表格序列号
    getIndex($index) {
      // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
      return (this.pageparm.page - 1) * this.pageparm.per_page + $index + 1;
    },
    //多选项框被选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 批量删除按钮操作 */
    handleDelete(row) {
      const ids = this.ids;
      let vm = this;
      vm.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        return zregionuserDel({ id: ids }).then((res) => {
          if (res.code == 1) {
            vm.$message.success(res.msg);
            vm.search();
          } else {
            vm.$message.warning(res.msg);
          }
        });
      });
    },
    changeStatus(row) {
      console.log(row, "row----");
    },
    addModule() { 
      this.$refs.addModuleFlag.addModuleFn(null, "新增", this.GroupList);
    },
    handleEdit(row, flag) {
      if (flag == "detail") {
        this.$refs.addModuleFlag.addModuleFn(row, "详情", this.GroupList);
      } else if (flag == "edit") {
        this.$refs.addModuleFlag.addModuleFn(row, "编辑", this.GroupList);
      } else if (flag == "delete") {
        let vm = this;
        vm.$confirm("您确定要删除选中的数据吗？", {
          closeOnClickModal: false,
        })
          .then((res) => {
            zregionuserDel({ id: row.id }).then((res) => {
              if (res.code == 1) {
                vm.$message.success(res.msg);
                vm.search();
              } else {
                vm.$message.warning(res.msg);
              }
            });
          })
          .catch(() => {});
      } else if (flag == "reset") {
        this.formInline = {
          page: 1,
          per_page: 10,
        };
        this.pageparm = {
          page: 1,
          per_page: 10,
          total: 0,
        };
        this.getData();
      }
    },

    callFather(parm) {
      this.formInline.page = parm.page;
      this.formInline.per_page = parm.per_page;
      this.getData();
    },
    search() {
      this.formInline.page = 1;
      this.formInline.per_page = 10;
      this.getData();
    },
    //获取列表
    async getData() {
      this.loadingPage = true;
      zregionuserList(this.formInline).then((res) => {
        this.loadingPage = false;
        if (res.code == 1) {
          this.tableData = res.data.data;
          // // 将列表数据转换为树形数据
          // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
          this.pageparm.page = res.data.current_page;
          this.pageparm.per_page = res.data.per_page;
          this.pageparm.total = res.data.total;
        }
      });
    },

    timeChange(val) {
      if (val) {
        this.formInline.beginAt = dateFormats(val[0], "yyyy-MM-dd hh:mm:ss");
        this.formInline.endAt = dateFormats(val[1], "yyyy-MM-dd hh:mm:ss");
      } else {
        this.formInline.beginAt = null;
        this.formInline.endAt = null;
      }
      this.search();
    },
    getGroupList() {
      // 管理员分组获取
      adminGroup().then((res) => {
        if (res.code == 1) {
          //console.log(res, "------------成功获取到管理员分组列表");
          this.GroupList = res.data;
        }
      });
    },
  },
  created() {
    this.userInfo = Number(JSON.parse(getStorage("groupId"))); //权限

    // 获取管理员分组
    // this.getGroupList();
    // 数据获取
    this.getData();
  },
};
</script>

<style>
.top_some{
    display: flex;
}
.boxs-bov {
  padding: 0 10px;
  box-sizing: border-box;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  /* display: table; */
  /* content: ""; */
}
.clearfix:after {
  clear: both;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding-top:10px ;
}
.box-card {
  width: 100%;
  margin-top: 20px;
}
.text_1{
    width: 80px;
}
.text_item{
    line-height: 30px;
    font-size: 16px;
}
.clearfix{
    font-size: 14px;
}
</style>
 